<template>
  <div id="addApp">
    <!-- 创建/修改应用 -->
    <h2 style="margin-bottom: 32px;">{{ props.id?'修改应用':'创建应用' }}</h2>
    <!-- 表单 -->
    <a-form :model="form" ref="formRef" :style="{ width: '480px' }" @submit="handleSubmit" :rules="rules">

      <!-- 应用名称 -->
      <a-form-item  field="appName" label="应用名称:" :validate-trigger="['input','blur']">
        <a-input
          v-model="form.appName"
          placeholder="请输入应用名称..."
        />
      </a-form-item>
 
       <!-- 应用描述 -->
       <a-form-item  field="appDesc" label="应用描述:" :validate-trigger="['input','blur']">
        <a-input
          v-model="form.appDesc"
          placeholder="请输入应用描述..."
        />
      </a-form-item>

       <!-- 应用图标 -->
       <a-form-item  field="appIcon" label="应用图标:" :validate-trigger="['input','blur']">
        <a-input
          disabled
          v-model="form.appIcon"
          placeholder="请输入应用图标..."
        />
      </a-form-item>

      <!--      <a-form-item field="appIcon" label="应用图标">-->
      <!--        <PictureUploader-->
      <!--          :value="form.appIcon"-->
      <!--          :onChange="(value) => (form.appIcon = value)"-->
      <!--        />-->
      <!--      </a-form-item>-->

       <!-- 应用类型  
          APP_TYPE_MAP 0: "得分类", 1: "测评类",
          Number(val), 将0,1转为数字类型 不然会多出一个0选项
        -->
       <a-form-item  field="appType" label="应用类型:" >
        <a-select v-model="form.appType"  placeholder="请选择应用类型 ...">
          <a-option v-for="(val, key) of APP_TYPE_MAP" :key="val" :value="Number(key)" :label="val" />
        </a-select>
      </a-form-item>

      <!-- 评分策略 0: "自定义", 1: "AI",  -->
        <a-form-item  field="scoringStrategy" label="评分策略:" >
        <a-select v-model="form.scoringStrategy"  placeholder="请选择评分策略 ...">
          <a-option v-for="(val, key) of APP_SCORING_STRATEGY_MAP" :key="val" :value="Number(key)" :label="val" />
        </a-select>
      </a-form-item>

      <!-- 创建按钮   -->
      <a-form-item>
        <a-button  type="primary" style="width:50%" html-type="submit">{{ props.id?'修改应用':'创建应用' }}</a-button>
      </a-form-item>
    </a-form>
    <!-- {{ form }} -->
  </div>
  
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue';
import API from '@/api'
import {  userRegisterUsingPost } from '@/api/userController';
// import { useLoginUserStore } from '@/store/userStore';
import message from '@arco-design/web-vue/es/message'
import { useRouter, useRoute } from 'vue-router';
import { addAppUsingPost,editAppUsingPost,getAppVoByIdUsingGet } from '@/api/appController';
import { APP_SCORING_STRATEGY_MAP, APP_TYPE_MAP } from '@/constant/app';

const router = useRouter();
// const route = useRoute()
// const loginUserStore = useLoginUserStore();

// 定义表单数据
const form = reactive({
  appDesc: '',
  appIcon: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp',
  appName: '',
  appType: 0,
  scoringStrategy: 0,
} as API.AppAddRequest | API.AppEditRequest)

// 定义校验规则
const rules = {
  appName: [
    { required: true, message: '应用名称不能为空' },
  ],
  appDesc: [
    { required: true, message: '应用描述不能为空' },
  ],
  appIcon: [
    {
      required: true,
      message:'应用图标不能为空',
    }
  ]
}

// 根据传进来的id 判断是新增还是修改
interface Props {
  id?: string
}

const props = withDefaults(defineProps<Props>(), {
  id: ()  => {
    return ''
  }
})

const oldApp = ref<API.AppVO>()

const loadData = async () => {
  if(!props.id) {
    let obj ={
      appDesc: '',
      appIcon: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp',
      appName: '',
      appType: 0,
      scoringStrategy: 0,
    }
    Object.assign(form, obj)
    if(form.id) delete form.id
    return
  }
  const res = await getAppVoByIdUsingGet({
    id: props.id as any,
  })
  if(res.data.code === 0) {
    oldApp.value = res.data.data as any;
    Object.assign(form, oldApp.value)
  } else {
    message.error('获取详情失败:' +res.data.message)
  }
}
watchEffect(() => { 
  loadData()
})

// 提交表单
const handleSubmit = async ({value, errors}:any) => {
  if(!errors) {
    let res:any
    if(props.id) {
      res = await editAppUsingPost(form)
    } else {
      res = await addAppUsingPost(form)
    }
    if(res.data.code === 0) {
      message.success('操作成功,正在跳转应用详情页')
      let id = props.id?props.id:res.data.data
      router.push(`/app/detail/${id}`)
      // 跳转到应用详情页面
      // setTimeout(() => {
      //   let id = props.id?props.id:res.data.data
      //   // console.log(`${id}`)
      //   router.push(`/app/detail/${id}`)
      // }, 3000)
    } else {
      message.error('操作失败:' + res.data.message as string)
    }
  }
}

</script>
<style lang="scss" scoped>
#addApp {
  width: 40vw;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  margin: 0 auto;
  min-width: 400px;
}
</style>